<template>
  <dv-border-box-10 v-show="Istheme == '0'">
    <el-card class="log_box">
      <p v-for="( item, index ) in  infoList " :key="index">
        [{{ item.log_level }}&nbsp;&nbsp;{{ item.log_time }}]&nbsp;{{ item.text }}
      </p>
    </el-card>
  </dv-border-box-10>

  <dv-border-box-12 v-show="Istheme == '1'">
    <el-card class="log_box">
      <el-card class="log_box">
        <p v-for="( item, index ) in  infoList " :key="index">
          [{{ item.log_level }}&nbsp;&nbsp;{{ item.log_time }}]&nbsp;{{ item.text }}
        </p>
      </el-card>
    </el-card>
  </dv-border-box-12>
</template>

<script>
export default {
  data() {
    return {
      infoList: [{ log_level: "D/I/W/E", log_time: "hh:mm:ss", text: "This location will display the log information！" }],
    }
  },
  computed: {
    Istheme() {
      return this.$store.state.global.theme
    },
  },
}
</script>

<style lang="scss" scoped>
.log_box {
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  height: 200px;
  padding: 0px;
  box-sizing: border-box;
  overflow-y: auto;

  p {
    width: 100%;
    line-height: 20px;
    color: rgb(231, 142, 26);
    font-size: 14px;
    text-align: left;
  }
}
</style>